import WebView from 'react-native-webview';
import { View, Text } from 'react-native';
import { TestCase, Tester, TestSuite } from '@rnoh/testerino';

export default function WebViewTestStyle() {
  return (
    <View style={{ flex: 1 }}>
      <Tester>
        <TestSuite name="react-native-webview">
          <TestCase
            key={'webview-style-test'}
            itShould={`测试WebView的style属性是否生效`}
            tags={['style', 'harmonyos', 'webview']}
            initialState={true}
            arrange={() => (
              <View style={{ padding: 20 }}>
                <Text style={{ fontSize: 18, marginBottom: 10, fontWeight: 'bold' }}>WebView Style属性测试</Text>
                <Text style={{ marginBottom: 20, color: '#666' }}>此测试直接对比两种样式设置方法在HarmonyOS上的表现</Text>
                
                {/* 测试1：直接在WebView上设置style属性 */}
                <View style={{ marginBottom: 30 }}>
                  <Text style={{ marginBottom: 10, fontSize: 16, color: '#ff6600' }}>测试1：直接在WebView上设置style属性</Text>
                  <Text style={{ marginBottom: 10, color: '#666' }}>尝试直接设置width、height、backgroundColor等样式属性</Text>
                  
                  <WebView
                    source={{ uri: 'https://www.example.com' }}
                    style={{
                      width: 300,
                      height: 200,
                      backgroundColor: '#f0f0f0',
                      borderWidth: 2,
                      borderColor: 'red',
                      borderRadius: 8
                    }}
                  />
                </View>
                
                {/* 测试2：通过父容器控制WebView样式 */}
                <View style={{ marginBottom: 20 }}>
                  <Text style={{ marginBottom: 10, fontSize: 16, color: '#0066cc' }}>测试2：通过父容器控制WebView样式</Text>
                  <Text style={{ marginBottom: 10, color: '#666' }}>通过父View容器设置尺寸和外观样式</Text>
                  
                  <View style={{
                    width: 300,
                    height: 200,
                    backgroundColor: '#e0e0e0',
                    borderWidth: 2,
                    borderColor: 'blue',
                    borderRadius: 8
                  }}>
                    <WebView
                      source={{ uri: 'https://www.example.com' }}
                      style={{ flex: 1 }}
                    />
                  </View>
                </View>
              </View>
            )}
            assert={({ expect, state }) => {
              expect(state).to.be.true;
            }}
          />
        </TestSuite>
      </Tester>
    </View>
  );
}